<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>考生注册</title>
    <script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/easyui/jquery-3.1.1.js"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" />
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css" />
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
        }
        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }
        font {
            color: #3164af;
            font-size: 18px;
            font-weight: normal;
            padding: 0 10px;
        }
    </style>
    <script type="text/javascript">
        function toindex(){
            window.location.href="index";
        }
        //提交验证
        function Vaildate(form) {
            if(form.inputPassword2.value == "") {
                alert("密码不能为空!");
                form.inputPassword1.focus();
                return false;
            }
            if(form.inputPassword2.value != form.inputPassword3.value) {
                alert("密码不一致!");
                form.inputPassword1.focus();
                return false;
            }
            return true;
        }

        $(function(){
            //判断密码是否为空
            $("#inputPassword2").blur(function(){
                var passwordInput = $(this).val();

                if(passwordInput==''){
                    //  alert('不能为空');
                    passwordInfo = "密码不能为空"
                    $("#passwordInfo").css("color","red");
                    $("#passwordInfo").html(passwordInfo);
                }
            });
            //判断密码是否一致
            $("#inputPassword3").blur(function(){
                var password1Input=$("#inputPassword2").val();
                var password2Input = $(this).val();

                if(password1Input!=password2Input){
                    passwordInfo = "密码不一致"
                    $("#passwordInfo").css("color","red");
                    $("#passwordInfo").html(passwordInfo);
                }
                if(password1Input==password2Input||password2Input=="")
                {
                    passwordInfo = "密码可以使用"
                    $("#passwordInfo").css("color","green");
                    $("#passwordInfo").html(passwordInfo);
                }
            });
        });
    </script>
</head>
<body  style="background-image:url('/static/image/back1.jpg');background-size:cover">
<div >
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-6"
             style="background: #fff; padding: 40px 80px; margin: 140px; border: 7px solid #ccc;">
            <font>修改密码</font>&nbsp;&nbsp;&nbsp;&nbsp;USER CHANGE <span style="color:red" th:text="${msg}"></span>
            <form class="form-horizontal" style="margin-top: 5px;"
                  action="ChangePassword" method="post" onsubmit="return Vaildate(this);">
                <div class="form-group">
                    <label  class="col-sm-2 control-label">原密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="inputPassword1"
                               name="password1" placeholder="请输入原密码">

                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">新密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="inputPassword2"
                               name="password2" placeholder="请输入新密码">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="inputPassword3"
                               placeholder="请输入确认密码">
                        <span id="passwordInfo"></span>
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="submit" width="100" value="修改" name="submit"
                               style="background: red; height: 35px; width: 100px; color: white;">
                        <input type="button" width="100" value="返回首页" onclick="toindex()"
                               style="background: red; height: 35px; width: 100px; color: white;"></div>
                </div>
            </form>
        </div>

        <div class="col-md-2"></div>

    </div>
</div>
</body>
</html>